<template>
    <view class="content">
        <scroll-view :scroll-y="true" :style="{'height':windowHeight+'px'}">
            <block v-for="(item,index) in goodsList" :key="index">
                <view class="good-item" @touchstart="startHandle($event,index)" @touchmove="moveHandle($event,index)"
                    @touchend="endHandle($event,index)" :style="{ right: item.right + 'rpx'}">
                    <view class="good-info">
                        <image class="info-left" :src="item.img"></image>
                        <view class="info-right">
                            <view class="name">{{item.name}}</view>
                            <view class="price">￥{{item.price}}</view>
                        </view>
                    </view>
                    <view class="del-btn" @click="delHandle(item.id)">删除</view>
                </view>
            </block>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// import { getSystemInfo } from '@dcloudio/uni-app'; // 假设使用的是 uni-app 框架

    const goodsList = ref([]);
    const windowHeight = ref(0);
    const delBtnWidth = ref(140);
    const startX = ref("");

    onMounted(() => {
      // getSystemInfo({
      //   success: (res) => {
      //     windowHeight.value = res.windowHeight;
      //   }
      // });

      goodsList.value = [
        { id: 1, name: "360页A5超厚笔记本批发记事本", price: 8, right: 0, img: "../../static/home_safe.png" },
        { id: 2, name: "软皮办公商务B5超厚360页笔记本", price: 4, right: 0, img: "../../static/home_safe.png" },
        { id: 3, name: "200页软皮办公商务B5超厚360页笔记本", price: 6, right: 0, img: "../../static/home_safe.png" },
        { id: 4, name: "180页软皮办公商务B5超厚360页笔记本", price: 5, right: 0, img: "../../static/home_safe.png" },
        { id: 5, name: "A5超厚软皮办公商务B5超厚360页笔记本", price: 3, right: 0, img: "../../static/home_safe.png" },
        { id: 6, name: "软皮办公商务B5超厚360页笔记本", price: 10, right: 0, img: "../../static/home_safe.png" },
        { id: 7, name: "A4软皮办公商务B5超厚360页笔记本", price: 12, right: 0, img: "../../static/home_safe.png" },
      ];
    });

    const startHandle = (e, index) => {
      const touch = e.touches[0];
      goodsList.value.forEach(item => item.right = 0);
      startX.value = touch.clientX;
    };

    const moveHandle = (e, index) => {
      const touch = e.touches[0];
      const disX = startX.value - touch.clientX; // 计算移动距离
      if (disX >= 20) {
        if (disX > delBtnWidth.value) {
          disX = delBtnWidth.value;
        }
        goodsList.value[index].right = disX;
      } else {
        goodsList.value[index].right = 0;
      }
    };

    const endHandle = (e, index) => {
      const good = goodsList.value[index];
      if (good.right >= delBtnWidth.value / 2) {
        goodsList.value[index].right = delBtnWidth.value;
      } else {
        goodsList.value[index].right = 0;
      }
    };

    const delHandle = (id) => {
      goodsList.value = goodsList.value.filter(item => item.id !== id);
    };


</script>

<style lang="scss">
.good-item{
    position: relative;
    width: 100%;
    background: #fff;
    display: flex;
    margin-bottom: 30rpx;
    .good-info{
        display: flex;
        padding:20rpx;
        font-size: 28rpx;
        .info-left{
            width: 120rpx;
            height: 120rpx;
            margin-right: 16rpx;
        }
        .info-right{
            .price{
                padding: 10rpx 0;
                color: red;
                font-size: 32rpx;
            }
        }
        
    }
    .del-btn{
        position: absolute;
        top:0;
        right:-140rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index:20;
        width: 140rpx;
        height:100%;
        background: #007AFF;
        color:#fff;
    }
}

page{
    background: #f4f4f4;
}
</style>